.sidebar
  text-size(s-1)
  padding: 2rem
  margin: 2rem
  border-left: 1px solid lighten($color-gray,60%)
  height: calc(100% - 4rem)
  h2
    text-size(m-1)
    display: inline-block
    padding: 0 0.2em
    box-shadow: inset 0 -0.8em 0 $color-light-gray
  li
    list-style-type: none
  &__link,&__archives,&__categories,&__tags
    padding: 0 0 0 1em
    border-left: 1px solid $color-black-2
    margin:1.6rem 0 1.6rem 1rem
    a
      box-shadow: inset 0 -0.1em 0 $color-black-2
      transition:all .3s cubic-bezier(.71,0,0,.99)
      text-decoration: none
      &:hover
        box-shadow: inset 0 -0.8em 0 $color-main
  &__tags
    li
      display: inline-block
      padding: 0 0.4em
  &__button
    display: none

@media screen and (max-width: $S)
  .sidebar
    width: 100%
    height: auto
    max-height: 100vh
    border: 0.8rem $color-main solid
    position: fixed
    top: 0
    right: 0
    padding: 4rem
    margin: 0
    overflow-y: scroll
    background: $color-white
    z-index: 2
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.15, 1)
    transform: translateY(-100%)

    &--expend
      transform: translateY(0)

    &__button
      display: block
      width: 3rem
      height 3rem
      background: $color-main
      background-image: url(../../img/icon-menu-sprite.svg)
      background-position: center 100%
      background-size: 100% auto
      background-repeat: no-repeat
      position: fixed
      top: 0.8rem
      right: 3rem
      z-index: 5
      transition: background-position 0.3s ease-out
      &--expend
        background-position: center 0







